<%@ page contentType="text/html; charset=utf-8"%>
<%@ include file="../../header.jsp"%>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>萌扣</title>
	<link href="${ctx}/uploadify/uploadify.css" rel="stylesheet" type="text/css" /> 
	<script type="text/javascript" src="${ctx}/uploadify/swfobject.js"></script>  
	<script type="text/javascript" src="${ctx}/uploadify/jquery.uploadify.min.js"></script>
	<script type="text/javascript">
	$(function(){ 
		$(".mkbanner>li:eq(4)").addClass("active");
		$("#uploadify").uploadify({
	        //按钮额外自己添加点的样式类.upload
	        'buttonClass'        :    'upload',
	        //文件选择框显示
	        'fileTypeDesc'        :     '选择图片',
	        //文件类型过滤
	        'fileTypeExts'         :     '*.jpg;*.png;*.gif;*.GIF;*.JPG;*.PNG',
	        //按钮高度
	        'height'            :    '30',
	        //按钮宽度
	        'width'                :    '100',
	        //请求类型
	        'method'            :    'post',
	        //是否支持多文件上传
	        'multi'                :     false,
	        //需要重写的事件
	        'overrideEvents'    :    ['onDialogClose','onSelectError','onUploadError'],
	        //上传动画，插件文件下的swf文件
	        'swf'                :    '${pageContext.request.contextPath}/uploadify/uploadify.swf',
	        //处理上传文件的服务类
	        'uploader'            :    '${pageContext.request.contextPath}/imgupload',
	        //上传按钮内容显示文本
	        'buttonText'        :    '图片上传',
	        'onUploadSuccess'    :    function(file, data, response){
	        	if(response){
	        		var result_ = eval('('+data+')');
	        		if(result_.data != null){
	        			$(".success_upload").text("图片上传成功!");
	        			$("#niud_sku").removeAttr("disabled");
	        			$("#key").val(result_.data.key);
	        		}
	        	}
	        }
	    });
	});
	
	function saveSku(){
		var name = $("#name").val();
		var image = $("#key").val();
		var stock = $("#stock").val();
		if(name == "" || name == ''){
			alert("请填写SKU名称");
			return;
		}else if(stock == "" || stock == ''){
			alert("请填写SKU库存");
			return;
		}else if(image == "" || image == ''){
			alert("请选择图片");
			return;
		}else{
			$.post("${ctx}/mengk/niudan/addniudansku",
					 $('#niudansku_form').serialize(),
					saveSkuBack,
					"json");
		}
	}
	
	function saveSkuBack(result){
		if(result.data){
			alert("操作成功");
			window.location.href = location.href;
		}
	}
	
	function deleteSku(id){
		if(confirm("确定下线SKU吗？")){
			$.post("${ctx}/mengk/niudan/"+id+"/deletesku",
					deleteSkuBack,
					"json");
		}
		
	}
	
	function deleteSkuBack(result){
		saveSkuBack(result);
	}
	
	function backbutton(){
		window.location.href="${ctx}/mengk/niudan/listniudan";
	}
	</script>
</head>
<body>
	<div class="container">
	   <div class="panel panel-info">
   <div class="panel-heading">
      <h3 class="panel-title">
      	扭蛋详情列表
      	<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">
		         添加sku
		</button>
		<button type="button" class="btn btn-info" onclick="backbutton()">返回扭蛋列表</button>
      </h3>
   </div>
   <div class="panel-body">
     <table class="table table-hover">
  		<thead>
      <tr>
         <th>SKUID</th>
         <th>名称</th>
         <th>库存</th>
         <th>图片</th>
         <th>操作</th>
      </tr>
   </thead>
   <tbody>
      <c:forEach var="bean" items="${list }">
      <tr>
         <td>${bean.id }</td>
         <td>${bean.name }</td>
         <td>${bean.stock }</td>
         <td>
         	<img alt="" src="${bean.image }" class="img-rounded">
         </td>
         <td>
         	<button type="button" class="btn btn-warning" onclick="deleteSku('${bean.id}')">下线SKU</button>
         </td>
      </tr>
      </c:forEach>
   </tbody>
	</table>
   </div>
</div>
	</div>
	<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">添加sku</h4>
      </div>
      <div class="modal-body">
		        <form class="form-horizontal" role="form" id="niudansku_form">
		   <div class="form-group">
		      <label for="firstname" class="col-sm-2 control-label">sku名称</label>
		      <div class="col-sm-10">
		         <input type="text" class="form-control" id="name" name="name"
		            placeholder="请输入扭蛋sku名称">
		      </div>
		   </div>
		   <div class="form-group">
		      <label for="firstname" class="col-sm-2 control-label">SKU库存</label>
		      <div class="col-sm-10">
		         <input type="text" class="form-control" id="stock" name="stock"
		            placeholder="库存">
		      </div>
		   </div>
		   <div class="form-group">
		      <label for="lastname" class="col-sm-2 control-label">图片</label>
		      <div class="col-sm-10">
		         <input type="file" id="uploadify" name="upfile">
		         <label class="success_upload" style="color: red;size: 10px;"></label>
		         <input type="hidden" name="image" id="key"/>
		         <input type="hidden" name="niudanId" value="${niudanId }">
		      </div>
		   </div>
		</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="niud_sku" disabled="disabled" onclick="saveSku()">保存</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>